<template>
  <div>
    <div>
      <ul class="el-upload-list el-upload-list--picture-card">
        <li
          v-for="(item, index) in showList"
          :key="index"
          class="el-upload-list__item is-ready"
          tabindex="0"
        >
          <img alt="" class="el-upload-list__item-thumbnail" :src="item" />
          <a class="el-upload-list__item-name">
            <i class="el-icon-document"></i>
          </a>
          <label class="el-upload-list__item-status-label">
            <i class="el-icon-upload-success el-icon-check"></i>
          </label>
          <i class="el-icon-close"></i>
          <i class="el-icon-close-tip">按 delete 键可删除</i>
          <span class="el-upload-list__item-actions">
            <span class="el-upload-list__item-preview">
              <i class="el-icon-zoom-in" @click="zoomImgInfo(item)"></i>
            </span>
            <span class="el-upload-list__item-delete">
              <i class="el-icon-delete" @click="delShowItem(index)"></i>
            </span>
          </span>
        </li>
      </ul>
      <div
        v-if="maxcount == 0 || maxcount > showList.length"
        class="el-upload el-upload--picture-card"
        tabindex="0"
        @click="showUpload"
      >
        <i class="el-icon-plus"></i>
      </div>
    </div>
    <UploadImage
      ref="UploadImage"
      :maxcount="maxcount"
      :nowcount="showList.length"
      @uploadChoose="uploadChoose"
    />
  </div>
</template>

<script>
  export default {
    name: 'VabImage',
    props: {
      maxcount: {
        type: Number,
        default: 1,
      },
      defaultList: {
        type: Array,
        default: () => [],
      },
    },
    data() {
      return {
        showList: [],
        uploadDialogVisible: false,
      }
    },
    watch: {
      defaultList: {
        handler(val) {
          this.showList = val
        },
        immediate: true,
      },
    },
    methods: {
      zoomImgInfo(item) {
        console.log(item)
      },
      /** 删除选中 */
      delShowItem(index) {
        this.showList.splice(index, 1)
        this.$emit('updateImg', this.showList)
      },
      showUpload() {
        this.$refs['UploadImage'].showLoad()
      },
      uploadChoose(data) {
        if (data.length == 0) return false
        /** 如果数量为1 清空原有覆盖最新 */
        if (this.maxcount == 1) {
          this.showList.splice(0, 1)
        }
        this.showList = this.showList.concat(data)
        this.$emit('updateImg', this.showList)
      },
    },
  }
</script>
